import styled from "styled-components";

const MembersWrapper = styled.div`
    background-color: #ffffff;

    

    .scroll_cont{
        height: 10rem;
        overflow-y: scroll;

        div{
            height: 2rem;
            display: flex;

        }
    }
`

const MeberContentWrapper = styled.div`
    background-color: #f7fafd;
    width: 100%;
    overflow: hidden;

    >div{
        background-color: #ffffff;
        margin: .2rem .2rem 0 .2rem;
        padding: .15rem;
        display: flex;
        border-radius: .1rem;

        .meber_img{
            img{
                width: 1rem;
                height: 1rem;
            }
        }
        .meber_info{
            flex: 1;
            flex-direction: column;
            margin-left: .15rem;

            .meber_info_title{
                height: .25rem;
                display: flex;
                flex: 1;
                h3{
                    font-size: .16rem;
                }
            }
            .meber_info_cont{
                line-height: .28rem;
                font-size: .12rem;
                color: #999999;

                span{
                    margin-right: .1rem;
                }
            }
        }
    }
`
const MeberBtnWrapper = styled.div`
    background-color: #f7fafd;
    overflow: hidden;
    
    div{
        margin: .3rem .2rem .1rem .2rem;
        height: .45rem;
        border-radius: .1rem;
        background-color: #2984f8;
        color: #ffffff;
        font-size: .16rem;
        line-height: .45rem;
        text-align: center;
    }
`

const MeberScrollWrapper = styled.div`
    height: 6rem;
    overflow-y: scroll;
    background-color: #f7fafd;
`

export {
    MembersWrapper,
    MeberContentWrapper,
    MeberBtnWrapper,
    MeberScrollWrapper,
}